<template>
    <div class="all">
        <div class="item" v-for="item in props.list" :key="item?.goodsId" @click="onClick(item)">
            <div class="bg">
                <div class="img">
                    <img :src="item.goodsLogo" @load="handleImageLoad" />
                    <van-loading v-if="!isImgLoaded" type="spinner" size="36px" />
                </div>
                <div>
                    <span class="tes">{{ item?.goodsName }}</span>
                    <span class="pri">价格：{{ item?.goodsPrice }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { type CatsTree } from '@/api';
import { ref } from 'vue'
import { useRouter } from 'vue-router'


const props = defineProps<{
    // 数据
    list: CatsTree.myGoods
}>()

const router = useRouter()

// loading条件
const isImgLoaded = ref(false)

function handleImageLoad() {
    isImgLoaded.value = true
}

function onClick(e:any){
    router.push({
        name:'detail',
        params:{goodsId:e.goodsId,type:e.type}
    })
}


</script>

<style lang="scss" scoped>
.all {
    // width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 5px 5px ;
    background-color: #fff;
}

.item {
    width: 50%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color: #fff;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.bg {
    padding: 10px;
    background-color: #ededed;
    border-radius: 5px;
    box-sizing: border-box;
}

.tes {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 0;
    box-sizing: border-box;
    font-size: 12px;
}

.pri {
    font-size: 14px;
}

.van-loading {
    text-align: center;
}
</style>